<template>
    <div class="main">
        <div class="tap">
            <a @click="typeClick('now-playing')">正在热映</a>
            <a @click="typeClick('coming-soon')">即将上线</a>
        </div>
        <ul>
            <li>
                <div>
                    <img src={{listL.cover.origin}} alt="">
                </div>
                <div>
                    <h3>{{listL.name}}</h3>
                    <p>{{listL.intro}}</p>
                    <p><span>{{listL.cinemaCount}}家影院上映</span>{{listL.watchCount}}人购票</p>
                </div>
                <div>
                    <span>{{listL.grade}}</span>
                    <i></i>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
            data:function () {
                return {
                    listL:[],
                    i:1,
                    loadtype:'now-playing'
                }
            },
            mounted: function() {
                this.load();
            },
            method:{
                typeClick(res){
                        this.loadtype = res;
                        this.load()
                },
                load(){
                    //http://m.maizuo.com/v4/api/film/coming-soon?page=1&count=7
                    var url="http://localhost:3000/listL/"+loadtype+"?page"+i+'&count=7';
                    var that=this;
                    $.get(url,function(res){
                        that.listL=res.data.films;
                        console.log(that.listL)
                    })
                }
            }
}
</script>
<style>
    .main{height: 100%;width: 100%;}
    .tap{height: 46px;width: 100%;}
    .tap a{ width: 50%;height: 45px; float: left;text-decoration: none;border-bottom: 1px solid #fe8233;text-align: center;line-height: 45px; color: #000;font-size: 16px;font-weight: bold; }
    .tap a:hover{color:#fe8233;border-bottom: solid;}
</style>
